import { Layout } from '@/layout';

export const meta = {
  title: 'Native browser validation does not work in some components, what should I do?',
  description: 'Learn why native browser validation does not work in some components',
  slug: 'native-required',
  category: 'components',
  tags: ['select', 'multi-select', 'autocomplete', 'tags-input', 'datepicker', 'required'],
  created_at: 'December 7, 2024',
  last_updated_at: 'December 7, 2024',
};

export default Layout(meta);

## Native browser validation

Native browser validation works with most of Mantine inputs,
for example, it can be used with [TextInput](https://mantine.dev/core/text-input),
[Textarea](https://mantine.dev/core/textarea), [NativeSelect](https://mantine.dev/core/native-select) and
other components.

However, some components like [Select](https://mantine.dev/core/select),
[MultiSelect](https://mantine.dev/core/multi-select), [Slider](https://mantine.dev/core/slider)
or [DatePicker](https://mantine.dev/dates/date-picker) do not support native
browser validation. These components provide custom UI
elements for data input and browsers do not treat them as
native inputs.

## Is there a workaround to use native browser validation?

No, there is no workaround to use native browser validation
for components with custom UI elements.

## What should I do instead?

If you are building a form that requires usage of Mantine inputs
with custom UI, you should validate form data after it has been
submitted. You can use [@mantine/form](https://mantine.dev/form/use-form) package
to perform form validation on submit.
